// 封装的ajax请求函数
// 参数1: 请求url地址
// 参数2: 请求方式 默认值 是 get
// 参数3: 携带参数 默认值 是 空字符串
// 参数4: 请求结束 并且 请求成功 执行的 回调函数 默认值是 空函数
function myAjax(url, type = 'get', data = '', callback = function () { }) {
    // 创建 ajax对象 
    let xhr;
    if (XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 判断 请求方式
    if (type.toLowerCase() === 'get') {
        // get方式请求
        xhr.open('get', `${url}?${data}`);
        xhr.send();

    } else {
        // post方式请求
        xhr.open('post', url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    // 接收 请求结果
    xhr.onreadystatechange = function () {
        // ajax状态码是 4   http状态码是200-299
        // if( xhr.readyState === 4 && ( xhr.status >= 200 && xhr.status <= 299 ) ){

        if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
            // ajax请求结束 并且 请求成功
            // 调用回调函数 赋值的数据是 响应体结果
            // 也就是 xhr.response 中 存储的响应体结果数据
            callback(xhr.response);
        }
    }
}

// 封装一个promise程序执行 ajax请求
// 参数1    请求的url地址
// 参数2    请求的方式 
// 参数3    携带的参数怇
function myPromiseAjax(url, type = 'get', data = '') {
    // 创建一个 promise 对象 
    const p = new Promise(function (fulfilled, rejected) {
        // 执行异步ajax请求
        const xhr = new XMLHttpRequest();

        if (type.toLowerCase() === 'get') {
            // get请求方式
            xhr.open('get', `${url}?${data}`);
            xhr.send();

        } else {
            // post请求方式
            xhr.open('post', url);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }

        // 接收 请求结果
        xhr.onreadystatechange = function () {
            // 当 ajax状态码是 4 时 判断 http状态码          
            if (xhr.readyState === 4) {

                // 如果 http状态码 是 200 - 299 
                if (/^2\d{2}$/.test(xhr.status)) {
                    // 请求成功
                    fulfilled(xhr.response);

                } else if (/^(4|5)\d{2}$/.test(xhr.status)) {
                    // 请求失败
                    rejected(xhr.statusText);

                }
            }
        }



        // xhr.onload = function(){
        //     // ajax状态码是 4   http状态码是200-299
        //     // if( xhr.readyState === 4 && ( xhr.status >= 200 && xhr.status <= 299 ) ){

        //     if( xhr.readyState === 4 && /^2\d{2}$/.test( xhr.status ) ){
        //         // ajax请求结束 并且 请求成功
        //         // 调用回调函数 赋值的数据是 响应体结果
        //         // 也就是 xhr.response 中 存储的响应体结果数据
        //         callback( xhr.response );
        //     }
        // }
    });

    // return 返回这个promise对象
    return p;
}

// 封装一个promise程序 执行 jQuery的ajax请求
function myPromiseJQueryAjax(url, type = 'get', data = '', dataType = 'text') {
    // 创建一个 promise对象
    const p = new Promise(function (fulfilled, rejected) {

        // 调用 jQuery封装的aja函数
        $.ajax({
            url: url,
            type: type,
            data: data,
            dataType: dataType,
            success: function (response) {
                fulfilled(response);
            },

            error: function (response) {
                rejected(response);
            },
        })

    })

    // return 返回这个 promise对象
    return p;
}